<template>
  <el-dialog
    title="上传文件"
    :visible.sync="visible"
    width="50%"
    :before-close="btnclose"
  >
    <UploadExcel ref="uploadexl" :on-success="onSuccess" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="btnclose">取 消</el-button>
      <el-button type="primary" @click="Okbtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { importArea } from '@/api/area.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  methods: {
    async onSuccess({ header, results }) {
      // console.log(this.$refs.uploadexl)
      const files = this.$refs.uploadexl.files
      // fromData专门处理文件类型
      const form = new FormData()
      // console.log(files)
      // 属性名：属性值
      form.append('file', files)
      console.log(form)
      await importArea(form)
      this.$message.success('上传成功！')
      this.btnclose()
    },
    Okbtn() {
    },
    btnclose() {
      this.$emit('cancelBtn')
    }
  }
}
</script>

<style scoped>
.wrapper {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
